<template>
    <div class="clause-info">
        <el-form ref="form" :model="form" label-width="80px">
            <el-row>
                <el-col :span="10">
                    <h3>来源信息</h3>
                    <div class="form-box">
                        <div class="box1">
                            <el-form-item label="来源编号(名称):" label-width="120px">
                                <!-- key+name -->
                                <el-input v-model="basicForm.sourceCode_" size="mini" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="来源版本号:" label-width="100px">
                                <el-input v-model="basicForm.sourceVersion_" size="mini" disabled></el-input>
                            </el-form-item>
                        </div>
                        <div class="box2">
                            <el-form-item label="来源类型:">
                                <el-select v-model="basicForm.sourceType_" placeholder="请选择" size="mini" disabled>
                                    <el-option v-for="(value, key) in Dict.sourceTypePojo" :value="key" :key="key" :label="value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="来源分组:">
                                <el-select v-model="basicForm.sourceGroupType_" placeholder="请选择" size="mini" disabled>
                                    <el-option></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="来源状态:" required>
                                <el-radio-group v-model="basicForm.sourceStatus_" disabled>
                                    <el-radio v-for="(value, key) in Dict.sourceStatusPojo" :label="key" :key="key">{{ value }}</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </div>
                        <div class="box-file" :key="docxKey">
                            <VueOfficePdf v-if="showPdf" :src="docxObj" @rendered="rendered" @error="errorHandler" />
                            <VueOfficeDocx v-else :src="docxObj" @rendered="rendered" @error="errorHandler" />
                        </div>
                    </div>
                </el-col>
                <el-col :span="14">
                    <div v-if="['look', 'edit'].includes(basicForm.operationType)">
                        <h3>条款信息</h3>
                        <div class="form-box">
                            <div class="box3">
                                <el-form-item label="条款号:" required>
                                    <el-input v-model="basicForm.termId_" size="mini" :disabled="disabled"></el-input>
                                </el-form-item>
                                <el-form-item label="条款名称:" required>
                                    <el-input v-model="basicForm.termName_" size="mini" :disabled="disabled"></el-input>
                                </el-form-item>
                            </div>
                            <el-form-item label="条款解读:">
                                <el-input v-model="basicForm.termRead_" size="mini" type="textarea" :rows="4" :disabled="disabled"></el-input>
                            </el-form-item>
                            <el-form-item label="条款适用产品:" label-width="110px" required class="box4">
                                <el-row>
                                    <el-col :span="24">
                                        <el-checkbox v-model="basicForm.publicMoneySource_" :disabled="disabled">公募</el-checkbox>
                                        <span>适用产品类型:</span>
                                        <el-select v-model="basicForm.fundTypePublicSource_" placeholder="请选择" size="mini" :disabled="disabled">
                                        </el-select>
                                    </el-col>
                                    <el-col :span="24">
                                        <el-checkbox v-model="basicForm.simuSource_" :disabled="disabled">私募</el-checkbox>
                                        <span>适用产品类型:</span>
                                        <el-select v-model="basicForm.fundTypeSimuSource_" placeholder="请选择" size="mini" :disabled="disabled">
                                        </el-select>
                                    </el-col>
                                    <el-col :span="24">
                                        <el-checkbox v-model="basicForm.zhuanhuSource_" :disabled="disabled">专户</el-checkbox>
                                        <span>适用产品类型:</span>
                                        <el-select v-model="basicForm.fundTypeZhuanhuSource_" placeholder="请选择" size="mini" :disabled="disabled">
                                        </el-select>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item label="条款豁免产品:" label-width="100px">
                                <el-input v-model="basicForm.suitableExemptFund_" size="mini" :disabled="disabled"></el-input>
                            </el-form-item>
                            <el-form-item label="O32系统支持情况:" label-width="130px">
                                <el-input v-model="basicForm.suitableExemptFund_" size="mini" :disabled="disabled"></el-input>
                            </el-form-item>
                            <el-form-item label="YH系统支持情况:" label-width="130px">
                                <el-input v-model="basicForm.suitableExemptFund_" size="mini" :disabled="disabled"></el-input>
                            </el-form-item>
                        </div>
                    </div>
                    <div v-else class="add-term">
                        <div v-for="item in clauseArr" :key="item.termCode_">
                            <div style="display: inline-block; width: calc(100% - 50px)">
                                <h3>条款信息</h3>
                                <div class="form-box">
                                    <div class="box3">
                                        <el-form-item label="条款号:" required>
                                            <el-input v-model="item.termId_" size="mini"></el-input>
                                        </el-form-item>
                                        <el-form-item label="条款名称:" required>
                                            <el-input v-model="item.termName_" size="mini"></el-input>
                                        </el-form-item>
                                    </div>
                                    <el-form-item label="条款适用产品:" label-width="110px" required class="box4">
                                        <el-row>
                                            <el-col :span="8">
                                                <el-checkbox v-model="item.publicMoneySource_">公募</el-checkbox>
                                                <span>产品类型:</span>
                                                <el-select v-model="item.fundTypePublicSource_" placeholder="请选择" size="mini"> </el-select>
                                            </el-col>
                                            <el-col :span="8">
                                                <el-checkbox v-model="item.simuSource_">私募</el-checkbox>
                                                <span>产品类型:</span>
                                                <el-select v-model="item.fundTypeSimuSource_" placeholder="请选择" size="mini"> </el-select>
                                            </el-col>
                                            <el-col :span="8">
                                                <el-checkbox v-model="item.zhuanhuSource_">专户</el-checkbox>
                                                <span>产品类型:</span>
                                                <el-select v-model="item.fundTypeZhuanhuSource_" placeholder="请选择" size="mini"> </el-select>
                                            </el-col>
                                        </el-row>
                                    </el-form-item>
                                </div>
                            </div>
                            <div style="margin-top: 30px">
                                <i class="el-icon-plus" type="primary" size="mini" @click="carouselClick(item, index, 'add')"> </i>
                                <i
                                    class="el-icon-minus"
                                    type="danger"
                                    size="mini"
                                    @click="carouselClick(item, index, 'delete')"
                                    v-if="clauseArr.length != 1"
                                >
                                </i>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { clauseManageDTO } from '../../vo';
import Dict from '../../dict/index';
import VueOfficePdf from '@vue-office/pdf';
import VueOfficeDocx from '@vue-office/docx';
import '@vue-office/docx/lib/index.css';
import { downloadBlob } from '@/utils/request';
@Component({ name: 'ClauseManageInfo', components: { VueOfficePdf, VueOfficeDocx } })
export default class ClauseManageInfo extends Vue {
    Dict = new Dict();
    basicForm: clauseManageDTO = {
        termCode_: '',
        termId_: '',
        termName_: '',
        termRead_: '',
        suitableFund_: '',
        suitableExemptFund_: '',
        O32support_: '',
        Yhsupport_: '',
        sourceType_: '',
        sourceGroupType_: '',
        sourceCode_: '',
        sourceName_: '',
        sourceVisible_: '',
        sourceSuitableFund_: '',
        sourceStatus_: '',
        termCreator_: '',
        termCreatDate_: '',
        termModifier_: '',
        termModuifyDate_: '',
        attachmentFileNos: '{"name":"禅道统计工具系统运维.pdf","fileNo":515,"uid":1705402243119,"status":"success"}',
    };
    clauseArr: any[] = [
        {
            termId_: '',
            termName_: '',
            publicMoneySource_: false,
            fundTypePublicSource_: '',
            simuSource_: false,
            fundTypeSimuSource_: '',
            zhuanhuSource_: false,
            fundTypeZhuanhuSource_: '',
        },
        {
            termId_: '',
            termName_: '',
            publicMoneySource_: false,
            fundTypePublicSource_: '',
            simuSource_: false,
            fundTypeSimuSource_: '',
            zhuanhuSource_: false,
            fundTypeZhuanhuSource_: '',
        },
    ]; // 条款信息

    clauseTemp = {
        termId_: '',
        termName_: '',
        publicMoneySource_: false,
        fundTypePublicSource_: '',
        simuSource_: false,
        fundTypeSimuSource_: '',
        zhuanhuSource_: false,
        fundTypeZhuanhuSource_: '',
    };
    docxObj: any = null;
    docxKey: number = 0;
    get disabled() {
        return this.basicForm['operationType'] == 'look';
    }

    get showPdf() {
        return JSON.parse(this.basicForm.attachmentFileNos).name?.indexOf('.pdf') > -1;
    }

    mounted() {
        this.basicForm = JSON.parse(JSON.stringify(this.$attrs.info));
        console.log(this.basicForm, 'basicForm');
        this.basicForm.attachmentFileNos = '{"name":"禅道统计工具系统运维.pdf","fileNo":517,"uid":1705402243119,"status":"success"}';
        this.downloadFiles(JSON.parse(this.basicForm.attachmentFileNos).fileNo);
    }

    async downloadFiles(no: string) {
        downloadBlob({
            url: '/system/download/file/' + no,
            method: 'get',
        }).then(res => {
            console.log(`一个一个下载${no}`);
            this.docxObj = res;
            console.log(this.docxObj, 'dddd');
            this.docxKey++;
        });
    }

    // 添加删除条款节点
    carouselClick(item: any, index: number, operation: string) {
        if (operation == 'add') {
            this.clauseArr.splice(index + 1, 0, JSON.parse(JSON.stringify(this.clauseTemp)));
        } else if (operation == 'delete') {
            this.clauseArr.splice(index, 1);
        }
    }

    rendered() {
        console.log('渲染完成');
    }

    errorHandler(e) {
        console.log('渲染失败');
        console.log(e, '???');
    }
}
</script>
<style lang="scss" scoped>
h3 {
    width: 60px;
    height: 30px;
    position: relative;
    top: 18px;
    left: 8px;
    text-align: center;
    background: #fff;
}

.form-box {
    border: 1px dashed #575757;
    margin-right: 5px;
    padding-right: 10px;
    .box1 {
        display: grid;
        grid-template-columns: 3fr 2fr;
    }

    .box2 {
        display: grid;
        grid-template-columns: 5fr 5fr 6fr;
    }
    .box-file {
        height: calc(62vh - 145px);
        overflow: auto;
        border: 1px solid #ccc;
        margin: 10px 0 10px 10px;
    }

    .box3 {
        display: grid;
        grid-template-columns: 1fr 2fr;
    }

    .box4 {
        .el-row {
            margin-bottom: 0px;
            .el-col-24 {
                width: 100%;
                min-width: 220px;
                padding-right: 10px;
                span {
                    margin: 0 10px;
                }
                /deep/ .el-select {
                    width: 90px;
                }
            }

            .el-col-8 {
                //     min-width: 200px;
                padding-right: 2px;
                span {
                    margin: 0 6px;
                }
                /deep/ .el-select {
                    // width: 90px;
                    width: calc(100% - 110px);
                }
            }
        }
    }

    /deep/ .el-radio {
        margin-right: 6px;
    }
}

.el-row {
    margin-bottom: 20px;
    .el-col-10 {
        padding-right: 10px;
    }
    .el-col-14 {
        .form-box {
            height: 62vh;
            overflow: auto;
        }
    }
}

.add-term {
    height: calc(62vh + 30px);
    overflow: auto;
    & > div {
        display: flex;
        align-items: center;
    }
    .form-box {
        height: fit-content !important;
    }
    .el-icon-plus {
        border: 2px solid green;
        font-size: 18px;
        color: green;
        font-weight: bolder;
    }
    .el-icon-minus {
        border: 2px solid red;
        font-size: 18px;
        color: red;
        margin: 0 4px;
        font-weight: bolder;
    }
}
/deep/ .el-checkbox .el-checkbox__label {
    font-size: var(--font-size-2);
    padding-left: 2px;
}
/deep/ .el-form {
    .el-form-item {
        .el-form-item__label {
            // color: var(--main-bg-text-color) !important;
            font-size: var(--font-size-2);
        }
    }
}
</style>
